<template>
    <view>
        <view class="trends" v-for="(item, index) in list" :key="index">
            <view class="trends-state">
                <view>{{ item.createTime }}</view>
                <view>{{ item.title }}</view>
            </view>
            <view class="trends-name">
                <u-avatar class="avatar" size="40" :src="'/static/img/dd.png'"></u-avatar>
                <text>{{ item.customerName }}</text>
            </view>
            <view class="trends-describe">{{ item.content }}</view>
            <view class="trends-time">
                <view style="margin-right: 150rpx;">
                    <u-icon name="clock" color="#677585" size="20"></u-icon>
                    <text>{{ item.createTime }}</text>
                </view>
                <view>
                    <u-icon name="chat" color="#677585" size="20"></u-icon>
                    <text>{{ item.commentNumber }}</text>
                </view>
            </view>
        </view>
        <u-loadmore :status="status" />
    </view>
</template>

<script>
export default {
    props: {
        id: {
            type: String
        }
    },
    data() {
        return {
            list: [],
            status: 'loading',
            queryData:{
                id: null,
                pageNum: 1,
                pageSize: 10
            },
            total: 0
        }
    },
    created() {
        this.queryData.id = this.id
        this.getData()
    },
    methods: {
        getData() {
            this.$http.get('/app/customer/customerDynamicList', this.queryData).then(res => {
				if (res.code == 200) {
                    this.list = [...this.list, ...res.rows]
                    this.total = res.total
                    if(this.total == this.list.length) {
                        this.status = 'nomore'
                    }
				} else {
					uni.$u.toast(res.msg)
				}
			}).catch(err => {
                console.log(err)
			})
        },
        loadmore() {
            if(this.total > this.list.length){
                this.queryData.pageNum ++
                this.getData()
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.trends {
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;
    padding: 32rpx;

    .trends-state {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 28rpx;

        >view:nth-child(1) {
            color: rgba(103, 117, 133, 1);
        }

        >view:nth-child(2) {
            color: rgba(12, 16, 25, 1);
        }
    }

    .trends-name {
        display: flex;
        align-items: center;
        margin-bottom: 28rpx;

        text {
            margin-left: 16rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }

    .trends-describe {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
        margin-bottom: 10rpx;
    }

    .trends-time {
        display: flex;

        >view {
            display: flex;
            align-items: center;
        }

        text {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
            margin-left: 8rpx;
        }
    }
}
</style>